<template>
	<view class="resourceMain">
		<uni-nav-bar shadow :title="title" @clickLeft="back" height="88rpx" :border="false" :fixed="true"
			backgroundColor="#FFFFFF" :shadow="false" left-icon="left"></uni-nav-bar>
		<view class="teacon" v-show="AllList.length>0">
			<view class="tealeft" v-for="(item,n) in AllList" @tap="$wanlshop.on('/pages/teacher/TeaMainInfo?id='+item.id)">
				<view class="timg">
					<image :src="item.image" mode=""></image> 
				</view>
				<text class="tt1">{{item.name}}</text>
				<view class="tinfo">
					<view>
						<text class="yan" style="width: 24rpx; margin-right: 4rpx;">
							<image style="width: 24rpx;" src="@/static/images/index/yan.png" mode=""></image>
						</text>
						<text>{{item.show_number}}</text>
					</view>
					<text class="san">
						<image src="@/static/images/index/san.png" mode="">
						</image>
					</text>

				</view>
			</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				id: '',
				title: '',
				AllList: [],
				currentPage: '1',
				status: 'loading',
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的'
				}
			}
		},
		onLoad: function(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.id = item.id;
			this.title = item.name;
		},
		onReady() {
			this.getList()
		},
		onReachBottom() {

			if (this.status == 'more') {

				this.currentPage++
				this.getList()
			}
		},
		onPullDownRefresh() {
			this.AllList=[]
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		this.currentPage=1
		this.getList()
				
		
		},

		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getList() {
				this.status = 'loading'
				this.$api.post({
					url: '/tea/pageList',
					data: {
						tea_cate_id: this.id,
						page: this.currentPage,
						per_page: '10'
					},
					success: res => {
						console.log(res);
						this.AllList = [...this.AllList, ...res.list.data]
						if (res.list.data.length < 10) {
							this.status = 'noMore';
						} else {
							this.status = 'more';
						}
						 uni.stopPullDownRefresh();  //停止下拉刷新



					},
					fail: error => {
						console.log(error)
					}
				})
			},
		
			toJoin(item) {
				uni.navigateTo({
					url: '/pages/teacher/JoinICoperation',

				})
			},

		}
	}
</script>

<style lang="scss">
	.resourceMain {
		background-color: #FFFFFF;

		/deep/.uni-nav-bar-text {
			font-size: 36rpx;
			color: #333333;
			font-weight: 800;
		}

		.teacon {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			flex-wrap: wrap;
			height: auto;
			// overflow: hidden;
			padding: 0 30rpx;

			.tealeft,
			.tearight {
				width: 336rpx;
				height: 300rpx;
				background: rgba(255, 255, 255, 0.39);
				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
				opacity: 1;
				margin-bottom: 20rpx;

				.timg {

					image {
						width: 316rpx;
						height: 176rpx;
					}

					width: 316rpx;
					height: 176rpx;
					// background-color: pink;
					margin: 0 auto;
					margin-top: 10rpx;
				}

				.tt1 {
					display: block;
					margin-left: 10rpx;
					margin-top: 16rpx;
					font-size: 28rpx;
					color: #333333;
					font-weight: 400;
					white-space:nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.tinfo {
					display: flex;
					justify-content: space-between;
					padding: 0 10rpx;
					margin-top: 14rpx;

					.yan,
					.san {
						display: inline-block;
						width: 16rpx;
						height: 20rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.san {
						margin-left: 30rpx;
					}

					.yy {
						width: 100rpx;
						height: 36rpx;
						font-size: 22rpx;
						color: #FFFFFF;
						background: rgba(231, 186, 119, 1);
						text-align: center;
						padding: 3rpx;
					}
				}
			}
		}

	}
</style>
